<template>
  <div class="subject">
    <span> {{ sumA }} </span>
    <span>+</span>
    <span> {{ sumB }} </span>
    <span>=</span>
    <input type="number" @click.stop v-model="vsum" />
    <button class="btn btn-dark" :disabled="falg" @click.stop="adds(index)">提交</button>
  </div>
</template>

<script>
export default {
  props: ['sumA', 'sumB', 'index'],
  data() {
    return {
      vsum: '',
      falg: false,
      clarr: '',
      text: ''
    }
  },
  computed: {
    sum() {
      return this.sumA + this.sumB
    }
  },
  methods: {
    adds() {
      this.vsum == this.sum ? (this.falg = true) : (this.falg = false)
      if (this.falg) {
        this.clarr = 'right'
        this.text = '正确'
      } else {
        this.clarr = 'error'
        this.text = '错误'
      }
      this.$emit('event-name', {
        clarr: this.clarr,
        text: this.text,
        index: this.index
      })
    }
  }
}
</script>

<style scoped>
button {
  margin: 10px;
}
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>
